<button class="btn">
  <span>Ripple</span>
  <div class="ripple-container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: material design, button, ripple */
.btn {
  border-radius: 0.5em;
  font-size: larger;
  height: 3em;
  width: 6em;
  position: relative;
  border: none;
  background-color: hsl(218, 68%, 52%);
  overflow: hidden;
  isolation: isolate;
  color: white;
  box-shadow: 1px 2px 4px #0007;
  transition: background-color 0.2s;
}

.btn:hover {
  background-color: hsl(218, 68%, 47%);
}

.btn > span {
  position: relative;
  pointer-events: none;
  z-index: 10;
}

.ripple-container {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 0.5em);
}

.ripple-container > span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ripple-container > span::after {
  content: "";
  pointer-events: none;
  position: absolute;
  background-color: hsl(218, 68%, 65%);
  transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s;
  width: 13em;
  height: 13em;
  opacity: 0;
  border-radius: 999em;
}

.ripple-container > span:active::after {
  transition: 0s;
  width: 0em;
  height: 0em;
  opacity: 1;
}

/*
Use this instead if you want the ripple to start
immediately on click but end abruptly on unclick:

.ripple-container > span::after {
  content: "";
  pointer-events: none;
  position: absolute;
  background-color: hsl(218, 68%, 65%);
  width: 0em;
  height: 0em;
  border-radius: 999em;
  opacity: 1;
}

.ripple-container > span:active::after {
  transition: width 0.25s ease-out, height 0.25s ease-out, opacity 0.75s;
  width: 13em;
  height: 13em;
  opacity: 0;
}

Your Global selectors gets triggered by this:
*/
</style>
